<template>
  <div class="draw-container"
    :style="{
      'left': `${positionX}px`,
      'top': `${positionY}px`
    }"
  >
    <div
      v-if="type == 1"
      class="draw-box"
    > 
      <div :class="['close', positionY < 20 ? 'bottom' : '']">
        <i class="el-icon-error" @click="deleteBox"></i>
      </div>
      <div class="box" :style="{
        'width': `${width}px`,
        'height': `${height}px`
      }">点击<br/>签署</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'drawContainer',
  props: {
    type: {
      type: [String, Number],
      default: 1
    },
    position: {
      type: Object,
      default: () => {}
    },
    width: {
      type: [String, Number],
      default: 100
    },
    height: {
      type: [String, Number],
      default: 100
    },
  },
  data() {
    return {
      positionX: 0,
      positionY: 0,
    }
  },
  watch: {
    position: {
      handler(val) {
        if (!val) return
        let {place_position_x, place_position_y} = val
        this.positionX = place_position_x || 0
        this.positionY = place_position_y || 0
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    deleteBox() {
      this.$emit('deleteBox')
    }
  }
}
</script>

<style lang="scss" scoped>
  .draw-container {
    position: absolute;
    .draw-box {
      position: relative;
      .close {
        position: absolute;
        display: flex;
        align-items: center;
        height: 20px;
        top: -20px;
        cursor: pointer;
        &.bottom {
          top: auto;
          bottom: -20px;
        }
      }
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: orange, $alpha: .6);
      }
    }
  }
</style>